﻿<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
    <title>R2</title>
    <script src="../libs/jquery.min.js" type="text/javascript"></script>
    <script src="../libs/jquery-ui-1.8.18.custom.min.js" type="text/javascript"></script>
    <script src="../libs/jquery.ba-resize.js" type="text/javascript"></script>
    <script src="../libs/jquery.ba-outside-events.min.js" type="text/javascript"></script>
    <script src="../libs/knockout-2.1.0.js" type="text/javascript"></script>
    <script src="../libs/json2.js" type="text/javascript"></script>
    <script src="../js/rsuite.extends.js" type="text/javascript"></script>
    <script src="../js/rsuite.services.js" type="text/javascript"></script>
    <script src="../js/rsuite.posize.js" type="text/javascript"></script>
    <script src="../js/rsuite.dialog.js" type="text/javascript"></script>
    <script src="../js/rsuite.menu.js" type="text/javascript"></script>
    <script src="../js/rsuite.copylock.js" type="text/javascript"></script>

    <link href="../css/rsuite.reset.css" type="text/css" rel="stylesheet" />
    <link href="../css/rsuite.client.css" type="text/css" rel="stylesheet" />
    <link href="../css/rsuite.dialog.css" type="text/css" rel="stylesheet" />
    <link href="../css/rsuite.theme.light.css" type="text/css" rel="stylesheet" />
    <link href="../css/rsuite.theme.csstricks.css" type="text/css" rel="stylesheet" />
    <link href="../css/rsuite.menu.css" type="text/css" rel="stylesheet" />
    <link href="../css/rsuite.copylock.css" type="text/css" rel="stylesheet" />

    <script src="../js/rsuite.r2.review.js" type="text/javascript"></script>
    <link href="../css/rsuite.r2.review.css" type="text/css" rel="stylesheet" />
</head>
<body class='posizable'>
    <div dock='top' style='border-bottom: 2px solid #888888;'>
        <span id='menu' class='rmenu' knockout='menu'>

        </span>
    </div>
    <div dock='right' knockout='review' style='width: 250px; padding: 5px;' class='posizable'>
        <div class='rdialog box' dock='top'>
            <table>
                <thead><tr><td>Review information</td></tr></thead>
                <tbody><tr><td>abc</td></tr></tbody>
                <tfoot><tr><td>Footer</td></tr></tfoot>
            </table>
        </div>
        <div dock='top' style='height: 10px'>&nbsp;</div>
        <div class='rdialog box posizable' dock='fill'>
            <div dock='top'>Comments</div>
            <div dock='bottom'>Total <span data-bind='text:comments().length'></span> comment(s)</div>
            <div id='comment-list' dock='fill' style='overflow: auto' data-bind='foreach:comments'>
                <div data-bind='css: {selected: isSelected() }, click: select' style='padding: 3px; width: 100%; display: inline-block; cursor: pointer'>
                    <div data-bind='html: problem'></div>
                    <div data-bind='visible: isSelected()'>
                        <img style='cursor: pointer; vertical-align: middle' src='../images/delete.png' data-bind='click: remove' />
                        <span style='border: 1px solid #A0A0A0; border-radius: 4px;'>
                            <img style='cursor: pointer; vertical-align: middle' src='../images/black-arrow-left.png' data-bind='click: dockLeft' />
                            <img style='cursor: pointer; vertical-align: middle' src='../images/black-arrow-top.png' data-bind='click: dockTop' />
                            <img style='cursor: pointer; vertical-align: middle' src='../images/black-arrow-right.png' data-bind='click: dockRight' />
                            <img style='cursor: pointer; vertical-align: middle' src='../images/black-arrow-bottom.png' data-bind='click: dockBottom' />
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div dock='fill' knockout='review' style='background-color: gray;' class='posizable'>
        <div id='linenums' dock='left' style='background-color: #AABBCC; min-width: 30px; text-align: right; padding: 5px; overflow: hidden; border-right: 1px solid #888888;'>
            <pre data-bind='text: linenums'>1
2</pre>
        </div>
        <div id='code' style='overflow: auto; background-color: white; padding: 5px' dock='fill'>
            <pre data-bind='code:code' class='copy-restricted'></pre>
            <!-- ko foreach: comments -->
            <div style='display:none; position: absolute; top: -100;' class='comment' data-bind='css: {selected: isSelected() }, click: select'>
                <!-- ko if:$parent.mode()==Constants.Mode.VIEW -->
                <!-- ko if:problem --><div class='problem' data-bind='html:problem'></div><!-- /ko -->
                <!-- ko if:response --><div class='response' data-bind='html:response'></div><!-- /ko -->
                <!-- /ko -->
                <!-- ko if:$parent.mode()==Constants.Mode.REVIEW -->
                <div class='problem' data-bind='contenteditable:problem, event: { focus: select }'></div>
                <!-- ko if:response --><div class='response' data-bind='contenteditable:response, event: { focus: select }'></div><!-- /ko -->
                <!-- /ko -->
                <!-- ko if:$parent.mode()==Constants.Mode.UPDATE -->
                <div class='problem' data-bind='contenteditable:problem, event: { focus: select }'></div>
                <div class='response' data-bind='contenteditable:response, event: { focus: select }'></div>
                <!-- /ko -->
                <comment data-bind='css: {selected: isSelected() }, click: select'></comment>
                <span data-bind='comment: $data'></span>
            </div>
            <!-- /ko -->
        </div>
    </div>
    <div id='about-dialog' class='rdialog box light csstricks' style='display:none; width: 200px; text-align: center;'>
        <table>
            <thead><tr><td>About</td></tr></thead>
            <tbody><tr><td>
                <h1>R2</h1>
                Code review tool
            </td></tr></tbody>
            <tfoot><tr><td>
            </td></tr></tfoot>
        </table>
    </div>
    <div id='remote-open-dialog' knockout='dialogs.remote.open' class='rdialog box light' style='display: none; width: 200px;'>
        <table>
            <thead><tr><td colspan='2'>Open review record...</td></tr></thead>
            <tbody><tr>
                <td>ID</td>
                <td><input type='text' data-bind='value: id' /></td>
            </tr><tr>
                <td colspan='2' style='color: red' data-bind='text: message'></td>
            </tr></tbody>
            <tfoot><tr>
                <td colspan='2'>
                    <a href='javascript:;' class='button' data-bind='click: openReview'>Open</a>
                </td>
            </tr></tfoot>
        </table>
    </div>
    <div id='remote-save-dialog' knockout='dialogs.remote.save' class='rdialog box light' style='display: none; width: 200px;'>
        <table>
            <thead><tr><td>Save completed</td></tr></thead>
            <tbody><tr><td>Review id is <b data-bind='text: id'></b></td></tr></tbody>
            <tfoot><tr><td></td></tr></tfoot>
        </table>
    </div>
    <div id='local-save-dialog' knockout='dialogs.local.save' class='rdialog box light' style='display: none; width: 200px;'>
        <table>
            <thead><tr><td>Save completed</td></tr></thead>
            <tbody><tr><td>Click <a href='javascript:;' data-bind='click: openFolder'>here</a> to open folder</td></tr></tbody>
            <tfoot><tr><td></td></tr></tfoot>
        </table>
    </div>
</body>
</html>